<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
            >确 定</el-button
          >
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <!-- <el-dialog :title="!dataForm.id ? '新建' :  isDetail ? '详情':'编辑'" :close-on-click-modal="false" :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll width="800px"> -->
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-form
          :rules="rules"
          ref="elForm"
          :model="dataForm"
          size="medium"
          label-width="139px"
          label-position="right"
          :disabled="!!isDetail"
        >
          <el-col :span="24">
            <el-form-item label="辨识评价计划名称" prop="jhmc">
              <el-input
                v-model="dataForm.jhmc"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
                prefix-icon=""
                suffix-icon=""
              >
                <template slot="prepend"></template>
                <template slot="append"></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辨识开始时间" prop="bskssj">
              <el-date-picker
                v-model="dataForm.bskssj"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                type="date"
                format="yyyy-MM-dd"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辨识结束时间" prop="bsjssj">
              <el-date-picker
                v-model="dataForm.bsjssj"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                type="date"
                format="yyyy-MM-dd"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="辨识评价类型" prop="type">
              <el-radio-group v-model="dataForm.type" :style="{}">
                <el-radio
                  v-for="(item, index) in typeOptions"
                  :key="index"
                  :label="item.id"
                  >{{ item.fullName }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="部门" prop="bm">
              <el-select
                filterable
                v-model="dataForm.bm"
                placeholder="请选择或搜索"
                clearable
                :style="{ width: '100%' }"
                @change="person"
              >
                <el-option
                  v-for="(item, index) in ssbmOptions"
                  :key="index"
                  :label="item.F_FullName"
                  :value="item.F_Id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="风险辨识评价负责人" prop="fzr">
              <el-select
                filterable
                v-model="dataForm.fzr"
                placeholder="请选择风险辨识评价负责人或搜索"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in fzrOptions"
                  :key="index"
                  :label="item.realName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
        <!-- </el-row> -->
        <!-- 选择风险点 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>分析评价任务分配</span>
            <el-tooltip
              v-if="dataForm.type == undefined"
              class="item"
              effect="dark"
              content="请选择辨识评价类型"
              placement="top-start"
            >
              <div style="float: right; padding: 3px 0">
                <el-button
                  :disabled="disabledBtn"
                  @click="riskPoints"
                  type="text"
                  icon="el-icon-circle-plus-outline"
                  >选择风险点</el-button
                >
              </div>
            </el-tooltip>
            <div
              style="float: right; padding: 3px 0"
              v-if="dataForm.type != undefined"
            >
              <el-button
                :disabled="disabledBtn"
                @click="riskPoints"
                type="text"
                icon="el-icon-circle-plus-outline"
                >选择风险点</el-button
              >
            </div>

            <!-- <el-button
              style="float: right; padding: 3px 0"
              :disabled="disabled"
              @click="riskPoints"
              type="text"
              icon="el-icon-circle-plus-outline"
              >选择风险点</el-button
            > -->
          </div>
          <!-- 表格(需要传给后端的) -->
          <el-form ref="Tform" :rules="rulesPro" :model="form">
            <el-table
              ref="fxdszArr"
              :data="form.fxdszArr"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column type="index" label="序号" align="left" />
              <el-table-column prop="point" label="风险点名称" align="left" />
              <el-table-column label="辨识人" align="left">
                <template slot-scope="scope">
                  <el-select
                    multiple
                    :disabled="disabled"
                    v-model="scope.row.bsr"
                    placeholder="请先选择部门"
                    clearable
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in personAll"
                      :key="index"
                      :label="item.realName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="评价人" align="left">
                <template slot-scope="scope">
                  <el-select
                    multiple
                    :disabled="disabled"
                    v-model="scope.row.pjr"
                    placeholder="请先选择部门"
                    clearable
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in personAll"
                      :key="index"
                      :label="item.realName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="评价方法" algin="left">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'fxdszArr.' + scope.$index + '.pjff'"
                    :rules="rulesPro.pjff"
                  >
                    <el-select
                      :disabled="disabled"
                      :style="{ width: '100%', 'margin-top': '20px' }"
                      v-model="scope.row.pjff"
                      placeholder="LS"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="150">
                <template slot-scope="scope">
                  <el-button
                    :disabled="disabled"
                    type="text"
                    @click="handleDel(scope.$index, scope.row.id)"
                    class="JNPF-table-delBtn"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-card>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pagination"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes"
          :total="total"
        >
        </el-pagination>
        <SelectRiskPoints
          :data="dataForm"
          v-if="SelectRiskPoints"
          @refreshDataList="initList"
          ref="SelectRiskPoints"
        ></SelectRiskPoints>
      </el-row>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import { departmentPerson } from "@/api/systemIntegration/recard";
import SelectRiskPoints from "./SelectRiskPoints";
import LogoVue from "@/layout/classic/sidebar/Logo.vue";
import { logout } from "@/api/user";
export default {
  data() {
    return {
      disabled: false,
      disabledBtn: true,

      options: [
        {
          value: "LEC",
          label: "LEC",
        },
        {
          value: "LS",
          label: "LS",
        },
      ],
      currentPage: 1, // 当前页
      pageSize: 20,
      total: 0,
      SelectRiskPoints: false,
      visible: false,
      isDetail: false,
      dataForm: {
        jhmc: undefined,
        bm: undefined,
        bskssj: undefined,
        bsjssj: undefined,
        type: undefined,
        fzr: [],
        fxdsz: [], // 表格内容
      },
      typeOptions: [
        { fullName: "设备设施", id: "0" },
        { fullName: "作业活动", id: "1" },
        { fullName: "工艺节点", id: "2" },
      ],
      fzrOptions: [],
      fzr: [],
      form: {
        fxdszArr: [], //表格
      },
      ssbmOptions: [], // 部门
      personAll: [], // 辨识人
      rulesPro: {
        pjff: [{ required: true, message: "请选择评价方法", trigger: "blur" }],
      },
      rules: {
        type: [
          { required: true, message: "请选择辨识评价类型", trigger: "change" },
        ],
        bm: [{ required: true, message: "请选择部门", trigger: "change" }],
      },
    };
  },
  components: { SelectRiskPoints },

  created() {
    // this.getfzrOptions();
    this.getssbmOptions();
  },
  watch: {
    "dataForm.bm": {
      handler(newVal, oldVal) {
        if (newVal && oldVal != undefined) {
          this.person();
          this.dataForm.fzr = null;
          this.form.fxdszArr.forEach((item) => {
            // if (!this.dataForm.id) {
            item.bsr = [];
            item.pjr = [];
            // }
          });
        }
      },
    },
    "dataForm.type": {
      handler(newVal) {
        this.isDetail == true
          ? (this.disabledBtn = true)
          : newVal || this.dataForm.type != undefined
          ? (this.disabledBtn = false)
          : (this.disabledBtn = true);
      },
    },
  },
  methods: {
    // 部门
    getssbmOptions() {
      previewDataInterface("772d2cbcadd24df79243e3d92ef5f690").then((res) => {
        this.ssbmOptions = res.data;
      });
    },
    // 删除
    handleDel(index, id) {
      this.form.fxdszArr.splice(index, 1);
    },
    // 选择风险点
    riskPoints() {
      this.SelectRiskPoints = true;
      this.$nextTick(() => {
        this.$refs["SelectRiskPoints"].init(this.dataForm.type);
      });
    },
    // 每页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 负责人
    async getfzrOptions() {
      // const {data} = await departmentPerson({organizeId:this.dataForm.bm})
      // this.fzrOptions = data.list
      // return previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
      //   this.fzrOptions = res.data
      // })
    },
    // 辨识人 评价人
    async person(val) {
      const { data } = await departmentPerson({ organizeId: this.dataForm.bm });
      this.personAll = data.list;
      this.fzrOptions = data.list;
      // this.form.fxdszArr.forEach((item) => {
      //   item.bsr = [];
      //   item.pjr = [];
      // });
    },
    // push表格
    initList(list) {
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        let item = {
          point: e.mc,
          bsr: undefined,
          pjr: undefined,
          pjff: undefined,
          id: e.id,
        };
        this.form.fxdszArr.push(item);
        this.total = this.form.fxdszArr.length;
      }
    },
    async init(id, isDetail, row) {
      // await this.getfzrOptions()
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      if (this.isDetail === true) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          request({
            url: "/api/System/riskPlan/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataForm = res.data;
            this.form.fxdszArr = JSON.parse(res.data.fxdsz);
            this.person();
            //人员处理
            // this.form.fxdszArr.forEach((item,i) => {
            //   let bsr = item.bsr // 辨识人
            //   let pjr = item.pjr // 评价人
            //   let bsrArr = []
            //   let pjrArr = []
            //   this.multiplexing(bsr,bsrArr)
            //   this.form.fxdszArr[i].bsr = bsrArr
            //   this.multiplexing(pjr,pjrArr)
            //   this.form.fxdszArr[i].pjr = pjrArr
            // })
            //人员处理
            this.total = this.form.fxdszArr.length;
          });
        }
      });
    },
    // 复用函数
    multiplexing(arr, strArr) {
      this.fzrOptions.forEach((el) => {
        if (this.isDetail === true) {
          arr.forEach((elememt) => {
            if (elememt === el.F_Id) {
              strArr.push(el.F_RealName);
            }
          });
        } else {
        }
      });
    },
    goBack() {
      this.$emit("refresh");
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.$refs["Tform"].validate((valid) => {
            if (valid) {
              this.dataForm.fxdsz = JSON.stringify(this.form.fxdszArr);
              if (!this.dataForm.id) {
                request({
                  url: "/api/System/riskPlan",
                  method: "post",
                  data: this.dataForm,
                }).then((res) => {
                  this.$message({
                    message: res.msg,
                    type: "success",
                    duration: 1000,
                    onClose: () => {
                      this.visible = false;
                      this.$emit("refresh", true);
                    },
                  });
                });
              } else {
                request({
                  url: "/api/System/riskPlan/" + this.dataForm.id,
                  method: "PUT",
                  data: this.dataForm,
                }).then((res) => {
                  this.$message({
                    message: res.msg,
                    type: "success",
                    duration: 1000,
                    onClose: () => {
                      this.visible = false;
                      this.$emit("refresh", true);
                    },
                  });
                });
              }
            }
          });
        }
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.pagination {
  float: right;
  margin: 20px 0;
}
</style>